<template>
  <div class="carousel">
    <el-carousel indicator-position="none" height="18rem" arrow="never" :interval="5000">
      <el-carousel-item v-for="item in slideList" >
        <a :href="item.to_url"><img :src="$imgUrl + item.image_url"></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  
  export default {
    data () {
      return {
        slideList:[
        ],
      }
    },
    mounted () {
      this.getBanner()
    },
    methods: {
      getBanner(){
         this.$api
          .getBanner()
          .then(res => {
             console.log(res);
             this.slideList = res.data.data
          })
          .catch(error => {
            console.log(error);
          });
      },
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './carousel.less';

</style>